import React from 'react';
import 'antd/dist/antd.css';
import { Menu, Icon } from 'antd';
const { SubMenu } = Menu;

class Nav extends React.Component {
    state = {
        collapsed: false,
    };

    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <div style={{ width: 256, float: "left" }}>
                <Menu
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    theme="dark"
                    inlineCollapsed={this.state.collapsed}
                >
                    <p style={{fontSize:30,textAlign: "center",paddingTop:30}}>Nurish</p>
                    <Menu.Item key="1">
                        <Icon type="pie-chart" />
                        <span>Dashiboard</span>
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Icon type="desktop" />
                        <span>News</span>
                    </Menu.Item>
                    <Menu.Item key="3">
                        <Icon type="inbox" />
                        <span>Calendar</span>
                    </Menu.Item>
                    <Menu.Item key="4">
                        <Icon type="unordered-list" />
                        <span>Directory</span>
                    </Menu.Item>
                    <Menu.Item key="5">
                        <Icon type="notification" />
                        <span>Notification</span>
                    </Menu.Item>
                    <Menu.Item key="6">
                        <Icon type="alert" />
                        <span>My Notification</span>
                    </Menu.Item>
                    <SubMenu
                        key="sub1"
                        title={
                            <span>
                                <Icon type="tool" />
                                <span>General Settings</span>
                            </span>
                        }
                    >
                        <Menu.Item key="7">Option 5</Menu.Item>
                        <Menu.Item key="8">Option 6</Menu.Item>
                        <Menu.Item key="9">Option 7</Menu.Item>
                        <Menu.Item key="10">Option 8</Menu.Item>
                    </SubMenu>
                    <Menu.Item key="11">
                        <Icon type="customer-service" />
                        <span>Support</span>
                    </Menu.Item>
                    <Menu.Item key="12">
                        <Icon type="user" />
                        <span>Users</span>
                    </Menu.Item>
                    <Menu.Item key="13">
                        <Icon type="unlock" />
                        <span>Role</span>
                    </Menu.Item>
                </Menu>
            </div>
        );
    }
}

export default Nav;